<template>
  <div>
    <quill-editor style='height:500px;' :value="prodGroupRentNeedKnowObj" ref="myQuillEditor" :options="editorOption"
    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)" @change="onEditorChange($event)">
    </quill-editor>

    <!-- <VueUeditorWrap/> -->
    <Modal v-model="uploadModal" title="图片管理" class="uploadModal-wrap" :closable='isClosable'>
      <!-- 上传组件 -->
      <div>
        <UploadTool :showUpload='showUpload' :optionObj='uploadImgPathList' @getSelectedImgList='getSelectedImgList'></UploadTool>
      </div>
      <div slot="footer">
        <Button @click='cancelUploadModal'>取消</Button>
        <Button type="primary" @click='confirm(uploadType)'>确定</Button>
      </div>

    </Modal>
  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
 import {
   mapState,
   mapMutations
 } from 'vuex'
 //import VueUeditorWrap from 'vue-ueditor-wrap'
 import Tables from '_c/tables'

 // require styles
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'

 // 上传组件
 import UploadTool from '../../../components/uploadTool/uploadTool.vue'
 import {
   uploadImgPathList
 } from '@/config/global.js'

 import {
   quillEditor,
   Quill
 } from 'vue-quill-editor'


 import ImageResize from 'quill-image-resize-module'

 Quill.register('modules/imageResize', ImageResize);
  export default {
    name: 'tables_page',
    components: {
      Tables,
      quillEditor,
      UploadTool
      // VueUeditorWrap //ueditor富文本编辑器
    },
    created() {
      this.getList()
    },
    watch: {

    },
    mounted() {
      this.$nextTick(function() {
        //编辑器


      })

    },
    computed: {
      ...mapState({
        prodGroupRentNeedKnowObj: state => state.share.prodGroupRentNeedKnowObj,
      }),
    },
    data() {
      // 工具栏配置
      const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
        ['blockquote', 'code-block'], // 引用，代码块

        [{
          header: 1
        }, {
          header: 2
        }], // 标题，键值对的形式；1、2表示字体大小
        [{
          list: 'ordered'
        }, {
          list: 'bullet'
        }], // 列表
        [{
          script: 'sub'
        }, {
          script: 'super'
        }], // 上下标
        [{
          indent: '-1'
        }, {
          indent: '+1'
        }], // 缩进
        [{
          direction: 'rtl'
        }], // 文本方向

        [{
          size: ['small', false, 'large', 'huge']
        }], // 字体大小
        [{
          header: [1, 2, 3, 4, 5, 6, false]
        }], // 几级标题

        [{
          color: []
        }, {
          background: []
        }], // 字体颜色，字体背景颜色
        [{
          font: []
        }], // 字体
        [{
          align: []
        }], // 对齐方式

        ['clean'], // 清除字体样式
        ['image', 'video'] // 上传图片、上传视频
      ]
      let self = this;
      return {
        uploadImgPathList: uploadImgPathList,
        uploadModal: false,
        // 子组件传递过来
        isClosable: false,
        fromChild: {
          selectedImgList: []
        },
        uploadType: '', //上传按钮判断
        uploadIndex: 0,
        showUpload: false,
        // wenben
        content: '',
        editorOption: {
          modules: {
            //imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: "black",
                border: "none",
                color: "white"
              },
              modules: ["Resize", "DisplaySize", "Toolbar"]
            },

            toolbar: {
              container: toolbarOptions, // 工具栏
              handlers: {
                'image': function(val) {
                  console.log(val)
                  if (val) {
                    self.upload('cover')
                    // document.querySelector('.editor-upload').click()

                  } else {
                    this.quill.format('image', false); //禁用quill内部上传图片
                  }

                }

              }
            }
          }
          // some quill options
        },

        // emd
        formValidate: {},
        tableData: [],
        ruleValidate: {},
        columns: [{
            title: '封面',
            slot: 'name'
          },
          {
            title: '规格名称',
            slot: 'age'
          },
          {
            title: '周期价格',
            slot: 'birthday'
          },
          {
            title: '成本',
            slot: 'address'
          },
          {
            title: '库存',
            slot: 'address'
          },
          {
            title: '虚拟销量',
            slot: 'address'
          }

        ],
        data: [{
            name: '王小明',
            age: 18,
            birthday: '919526400000',
            address: '北京市朝阳区芍药居'
          }

        ],
        editIndex: 0, // 当前聚焦的输入框的行数
        editName: '', // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
        editAge: '', // 第二列输入框
        editBirthday: '', // 第三列输入框
        editAddress: '', // 第四列输入框
      }
    },
    methods: {
      ...mapMutations([
        'setProdGroupRentNeedKnowObj', //宝贝详情

      ]),
      //上传
      upload(type, index) {
        // type为上传的类型，‘cover’封面
        this.uploadType = type;
        this.uploadIndex = index;
        this.uploadModal = true;
        this.showUpload = true;


      },
      cancelUploadModal() {
        this.uploadModal = false;
        this.showUpload = false;
      },
      confirm() {

        let quill = this.$refs.myQuillEditor.quill;
        this.fromChild.selectedImgList.forEach(function(cv) {
          let length = quill.selection.savedRange.index
          // 插入图片
          quill.insertEmbed(length, 'image', cv.url)
          //quill.insertEmbed(length, 'video', url)
          // 调整光标到最后
          quill.setSelection(length + 1)

        })
        this.uploadModal = false;
        this.showUpload = false;
        // let url = this.fromChild.selectedImgList[0].url;
        // 获取光标所在位置

      },
      getSelectedImgList(e) {
        this.fromChild.selectedImgList = e;



      },
      // 列表数据
      getList() {
        let type = 'success'
        // this.$Message[type]({
        //   background: true,
        //   content: '这是一条带背景色的通知'
        // });

      },
      // wen
      onEditorBlur(quill) {


      },
      onEditorFocus(quill) {


      },
      onEditorReady(quill) {

      },
      onEditorChange({
        quill,
        html,
        text
      }) {

        //this.setProdGroupRentNeedKnowObj = html;
        this.setProdGroupRentNeedKnowObj(this.escapeStringHTML(html))
      },
      escapeStringHTML(str) {
        // 转码
        str = str.replace(/&lt;/g, '<');
        str = str.replace(/&gt;/g, '>');
        return str;
      },

      // end
      handleEdit(row, index) {
        this.editName = row.name;
        this.editAge = row.age;
        this.editAddress = row.address;
        this.editBirthday = row.birthday;
        this.editIndex = index;
      },
      handleSave(index) {
        this.data[index].name = this.editName;
        this.data[index].age = this.editAge;
        this.data[index].birthday = this.editBirthday;
        this.data[index].address = this.editAddress;
        this.editIndex = -1;
      },
      getBirthday(birthday) {
        const date = new Date(parseInt(birthday));
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        return `${year}-${month}-${day}`;
      },
      change(status) {
        this.$Message.info('开关状态：' + status);
      }
    },

  }
</script>

<style lang="scss">
  @import "./rent-need-know";
</style>
